// 加载框样式 scss 版本（未使用）
#{$_}loader {
  $one: rgba(255,0,255, 1);
  $two: rgba(0,255,255, 1);
  height: 100%;
  height: 100vh;
  width: 100%;
  width: 100vw;
  font-size: 10px;
  position: fixed;
  @include flexCenter;
  background: #475069;

  &#{$__}body {
    position: relative;
    width: 320px;
    height: 320px;
    @include flexCenter;

    &-logo {
      width: 50%;
      animation-iteration-count: infinite;
    }

    &-face {
      position: absolute;
      border-radius: 50%;
      border-style: solid;
      animation: animate 3s linear infinite;

      &:nth-child(1) {
        width: 100%;
        height: 100%;
        color: $one;
        border-color: currentColor transparent transparent currentColor;
        border-width: 0.2em 0.2em 0em 0em;
        --deg: -45deg;
        animation-direction: normal;
      }

      &:nth-child(2) {
        width: 80%;
        height: 80%;
        color: $two;
        border-color: currentColor currentColor transparent transparent;
        border-width: 0.2em 0em 0em 0.2em;
        --deg: -135deg;
        animation-direction: reverse;
      }

      &-circle {
        position: absolute;
        width: 50%;
        height: 0.1em;
        top: 50%;
        left: 50%;
        background-color: transparent;
        transform: rotate(var(--deg));
        transform-origin: left;

        &::before {
          position: absolute;
          top: -0.5em;
          right: -0.5em;
          content: '';
          width: 1em;
          height: 1em;
          background-color: currentColor;
          border-radius: 50%;
          box-shadow: 0 0 2em,
            0 0 4em,
            0 0 6em,
            0 0 8em,
            0 0 10em,
            0 0 0 0.5em rgba(255, 255, 0, 0.1);
        }
      }
    }

    @keyframes animate {
      to {
        transform: rotate(1turn);
      }
    }

    @include pad {
      width: 50vw;
      height: 50vw;
      max-width: 500px;
      max-height: 500px;
    }
  }
}
